<template>
    <div class="current-container">
        <ul class="current-container-ul">
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
            <li>
                <div class="list-group-lt">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">MKR</p>
                        <p class="list-group-p2">Maker DAO Old</p>
                    </div>
                </div>
                <div class="list-group-rt">
                    <el-checkbox></el-checkbox>
                </div>
            </li>
        </ul>
        <div class="block-paging">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[8, 16, 24, 32]"
                    :page-size="4"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="32">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            };
        }
    }
</script>
<style scoped>
    .current-container{
        width: 700px;
        height: auto;
        margin: 30px auto 0 auto;
    }
    ul,li,p{
        padding: 0;
        margin: 0;
        font-size: 15px;
    }
    .current-container .current-container-ul li{
        border-bottom: 1px #ccc solid;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
    }
    .list-group-lt img{
        width: 24px;
        height: 24px;
        display: inline-block;
        float: left;
        margin-top: 6px;
        margin-right: 18px;
    }
    .list-group-lt .list-group-inner{
        float: left;
    }
    .list-group-inner .list-group-p2{
        font-size: 12px;
        color: #ccc;
    }
    .list-group-rt{
        line-height: 36px;
    }
    .el-checkbox__inner{
        width: 18px;
        height: 18px;
    }
    .el-checkbox__inner::after{
        left: 6px;
        top: 2px;
    }
    .block-paging{
        margin-top: 30px;
    }
</style>